<template>
  <!-- <div class="evaluateWtapper">
    <div class="evaluateItem" v-for="(item, index) in reply" :key="index">
      <div class="pic-text acea-row row-middle">
        <div class="pictrue">
          <img :src="item.avatar" class="image" />
        </div>
        <div class="acea-row row-middle">
          <div class="name line1">{{ item.nickname }}</div>
          <div class="start" :class="'star' + item.star"></div>
        </div>
      </div>
      <div class="time">{{ item.add_time }} {{ item.suk }}</div>
      <div class="evaluate-infor">{{ item.comment }}</div>
      <div class="imgList acea-row">
        <div class="pictrue" v-for="(itemn, index) in item.pics" :key="index">
          <img :src="itemn" class="image" />
        </div>
      </div>
      <div class="reply" v-if="item.merchant_reply_content">
        <span class="font-color-red">店小二</span>：{{
          item.merchant_reply_content
        }}
      </div>
    </div>
  </div> -->
<div>
  <div class="main" v-if="replyData.reply_chance">
    <div class="goodRates acea-row" >
      <div class="left">
        <div class="label">好评率</div>
        <div class="goodRate">{{ replyData.reply_chance || 0 }}%</div>
        <div>
          <el-rate
            v-model="replyData.reply_chance"
            disabled 
            text-color="#ff9900">
          </el-rate>
        </div>
      </div>
      <div class="right">
        <div class="title">大家都在说：</div>
        <div class="nav acea-row">
          <div  v-for="(item, index) in navList" :key="index" @click="changeType(index)">
            <p  class="item" :class="currentActive === index ? 'bg-color' : ''" v-if="item.num"> {{ item.evaluate }}({{ item.num }})</p>
          </div>
        </div>
      </div>
    </div>
    <EvaluationGroup :reply="reply"></EvaluationGroup>
  </div>
  <div v-else>本商品评价还是空滴</div>
</div>
</template>
<script>
  import { getReplyConfig, getReplyList } from "@api/store";
  import Loading from "@components/Loading";
  import EvaluationGroup from "@components/EvaluationGroup";

  
  export default {
    name: "UserEvaluation",
    components: {
      Loading,
      EvaluationGroup
    },
    props: {
      id:{
        type:Number,
        default:0
      }
    },
    data: function() {
      let that=this;
      return {
        product_id: that.id,
        replyData: {},
        navList: [
          { evaluate: "全部", num: 0 },
          { evaluate: "好评", num: 0 },
          { evaluate: "中评", num: 0 },
          { evaluate: "差评", num: 0 }
        ],
        currentActive: 0,
        page: 1,
        limit: 8,
        reply: [],
        loadTitle: "",
        loading: false,
        loadend: false
      };
    },
    watch: {
      $route(n) {
        if (n.name === NAME) {
          this.product_id = this.$route.params.id;
          this.loadend = false;
          this.page = 1;
          this.$set(this, "reply", []);
          this.getProductReplyCount();
          this.getProductReplyList();
        }
      }
    },
    mounted: function() {
      this.product_id = this.$route.params.id;
      this.getProductReplyCount();
      this.getProductReplyList();
      this.$scroll(this.$refs.container, () => {
        !this.loading && this.getProductReplyList();
      });
    },
    methods: {
      getProductReplyCount: function() {
        let that = this;
        getReplyConfig(that.product_id).then(res => {
          that.$set(that, "replyData", res.data);
          that.navList[0].num = res.data.sum_count;
          that.navList[1].num = res.data.good_count;
          that.navList[2].num = res.data.in_count;
          that.navList[3].num = res.data.poor_count;
        });
      },
      getProductReplyList: function() {
        let that = this;
        if (that.loading) return; //阻止下次请求（false可以进行请求）；
        if (that.loadend) return; //阻止结束当前请求（false可以进行请求）；
        that.loading = true;
        let q = { page: that.page, limit: that.limit, type: that.currentActive };
        getReplyList(that.product_id, q).then(res => {
          that.loading = false;
          //apply();js将一个数组插入另一个数组;
          that.reply.push.apply(that.reply, res.data);
          that.loadend = res.data.length < that.limit; //判断所有数据是否加载完成；
          that.page = that.page + 1;
        });
      },
      changeType: function(index) {
        let that = this;
        that.currentActive = index;
        that.page = 1;
        that.loadend = false;
        that.$set(that, "reply", []);
        that.getProductReplyList();
      }
    }
  };
</script>
<style scoped>
  .main {
    width: 788px;
  }
  .main .goodRates {
    width: 788px;
    height: 136px;
    padding-bottom: 10px;
  }
  .main .goodRates .left {
    width: 155px;
    height: 101px;
    border-right: 1px solid #eaeaea;
    text-align: center;
    padding-top: 4px;
    margin-right: 20px;
  }
  .main .goodRates .left .label {
    font-size: 14px;
    color: #666;
    line-height: 14px;
    margin-bottom: 15px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #333;
  }
  .main .goodRates .left .goodRate {
    font-size: 36px;
    color: #E36844;
    line-height: 36px;
    margin-bottom: 8px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
  }
  .main .goodRates .right {
    width: 562px;
    margin: 0 20px;
    padding: 4px 0 6px;
    overflow: hidden;
    font-size: 14px;
    height: 146px;
  }
  .main .goodRates .right  .title {
    width: 582px;
    height: 28px;
    padding-bottom: 14px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #333;
    font-size: 14px;
    line-height: 14px;
  }
  .main .goodRates .right .nav {
    width: 582px;
  }
  .main .goodRates .right  .nav .item {
    min-width: 95px;
    height: 26px;
    margin: 0 20px;
    padding: 4px 0 6px;
    overflow: hidden;
    background-color: #F5F3EF;
    border-radius: 13px;
    text-align: center;
    line-height: 18px;
    cursor: pointer;
  }
  .main .goodRates .right  .nav .bg-color {
    background-color: #b4a078;
    color: #fff;
  }
</style>